<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩票中奖判断</title>
    <!-- 引入 Bootstrap 样式表 -->
    <link rel="stylesheet"  href="static/css/bootstrap.min.css">
    <style>
        body {
            padding: 20px;
        }
        form {
            max-width: 600px;
            margin: auto;
        }
        #numbers::placeholder {
            color: gray;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1 class="text-center">彩票中奖判断</h1>
    <form action="/check_winning" method="post">
        <div class="form-group">
            <label for="lottery_type">彩票类型：</label>
            <select class="form-control" name="lottery_type" id="lottery_type" onchange="getIssueNumbers()">
                <option value="大乐透">大乐透</option>
                <option value="双色球">双色球</option>
            </select>
        </div>
        <div class="form-group">
            <label for="issue_number">期号：</label>
            <select class="form-control" name="issue_number" id="issue_number" required>
                <!-- Options will be dynamically populated using JavaScript -->
            </select>
        </div>
        <div class="form-group">
            <label for="numbers">彩票号码（每组一行）：</label>
            <textarea class="form-control" name="numbers" id="numbers" rows="6" placeholder="示例：01 02 03 04 05 06 07"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>

    <!-- 引入 jQuery -->
    <script src="static/js/jquery-3.6.4.min.js"></script>

    <script>
        function getIssueNumbers() {
            var lotteryType = $("#lottery_type").val();

            // 发送异步请求获取对应类型的期号数据
            $.ajax({
                url: "/get_issue_numbers",
                type: "POST",
                data: JSON.stringify({ lottery_type: lotteryType }),
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    // 更新期号下拉菜单的选项
                    var issueNumberDropdown = $("#issue_number");
                    issueNumberDropdown.empty();
                    $.each(data, function (index, value) {
                        issueNumberDropdown.append("<option value='" + value + "'>" + value + "</option>");
                    });
                },
                error: function (error) {
                    console.log("Error fetching issue numbers: ", error);
                }
            });
        }

        // 页面加载时获取初始期号数据
        $(document).ready(function () {
            getIssueNumbers();
        });
    </script>
</body>
</html>
